<template>
  <div class="app-container dashboard">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="dashboard-header">
          <h1>系统运营数据大屏</h1>
          <div class="time-info">{{ currentTime }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-card-header">
            <span>总用户数</span>
            <i class="el-icon-user"></i>
          </div>
          <div class="data-card-body">
            <count-to :start-val="0" :end-val="totalUsers" :duration="2000" class="card-number"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-card-header">
            <span>今日访问量</span>
            <i class="el-icon-view"></i>
          </div>
          <div class="data-card-body">
            <count-to :start-val="0" :end-val="todayVisits" :duration="2000" class="card-number"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-card-header">
            <span>系统消息</span>
            <i class="el-icon-message"></i>
          </div>
          <div class="data-card-body">
            <count-to :start-val="0" :end-val="messageCount" :duration="2000" class="card-number"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-card-header">
            <span>在线用户</span>
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="data-card-body">
            <count-to :start-val="0" :end-val="onlineUsers" :duration="2000" class="card-number"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>用户增长趋势</span>
          </div>
          <div class="chart-container">
            <div ref="userTrendChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>访问量分布</span>
          </div>
          <div class="chart-container">
            <div ref="visitDistChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header">
            <span>系统性能监控</span>
          </div>
          <div class="chart-container">
            <div ref="systemMonitorChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  name: "Dashboard",
  components: {
    CountTo
  },
  data() {
    return {
      currentTime: '',
      totalUsers: 1234,
      todayVisits: 567,
      messageCount: 89,
      onlineUsers: 45,
      timer: null,
      userTrendChart: null,
      visitDistChart: null,
      systemMonitorChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.startTimer()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.disposeCharts()
  },
  methods: {
    startTimer() {
      this.updateTime()
      this.timer = setInterval(this.updateTime, 1000)
    },
    updateTime() {
      this.currentTime = new Date().toLocaleString()
    },
    initCharts() {
      this.initUserTrendChart()
      this.initVisitDistChart()
      this.initSystemMonitorChart()
    },
    initUserTrendChart() {
      this.userTrendChart = echarts.init(this.$refs.userTrendChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330],
          type: 'line',
          smooth: true
        }]
      }
      this.userTrendChart.setOption(option)
    },
    initVisitDistChart() {
      this.visitDistChart = echarts.init(this.$refs.visitDistChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '首页' },
            { value: 735, name: '用户中心' },
            { value: 580, name: '系统管理' },
            { value: 484, name: '其他' }
          ]
        }]
      }
      this.visitDistChart.setOption(option)
    },
    initSystemMonitorChart() {
      this.systemMonitorChart = echarts.init(this.$refs.systemMonitorChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CPU使用率', '内存使用率', '磁盘使用率']
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          {
            name: 'CPU使用率',
            type: 'line',
            data: [30, 40, 35, 50, 49, 60, 70, 91]
          },
          {
            name: '内存使用率',
            type: 'line',
            data: [45, 50, 55, 60, 65, 70, 75, 80]
          },
          {
            name: '磁盘使用率',
            type: 'line',
            data: [60, 62, 64, 66, 68, 70, 72, 74]
          }
        ]
      }
      this.systemMonitorChart.setOption(option)
    },
    disposeCharts() {
      if (this.userTrendChart) {
        this.userTrendChart.dispose()
      }
      if (this.visitDistChart) {
        this.visitDistChart.dispose()
      }
      if (this.systemMonitorChart) {
        this.systemMonitorChart.dispose()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  background: #f0f2f5;

  .dashboard-header {
    text-align: center;
    margin-bottom: 20px;
    
    h1 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 10px;
    }

    .time-info {
      color: #909399;
      font-size: 14px;
    }
  }

  .data-overview {
    margin-bottom: 20px;
  }

  .data-card {
    .data-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      
      span {
        font-size: 16px;
        color: #606266;
      }
      
      i {
        font-size: 20px;
        color: #409EFF;
      }
    }

    .data-card-body {
      text-align: center;
      
      .card-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;
  }

  .chart-container {
    padding: 10px;
  }
}
</style> 